<template>
  <div class="all">
    <div class="mainBody">
      <div class="mainBody-box">
        <div class="mainBody-box-paixu">
          <span
            :class="{ active: index == num }"
            v-for="(item, index) in list"
            @click="tabs(index)"
            >{{ item.apps }}</span
          >
        </div>
        <div class="body-wrap-box-main">
          <div class="mainBody-card" v-for="(item, index) in hotData" @click="HotDetail(item.id)">
            <div class="mainBody-card-child">
              <el-image :src="item.image" lazy></el-image>
              <!-- <img src="../../assets/text5.jpg" alt="" lazy="true"/> -->
              <p class="card-one">{{ item.title1 }}</p>
              <p class="card-two">{{ item.num }}</p>
              <div id="black-wrap">
                <span>{{ item.leixing }}</span>
                <span>{{ item.timer }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="Myshows-wrap" v-if="shows">
        <img src="../../assets/kong_icon.svg" alt="">
      </div>
    </div>
    <div class="fye-wrap">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
        :page-size="30"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "mainBody",
  data() {
    return {
      LX1: "",
      total: 10,
      shows:false,
      num: 0,
      list: [{ apps: "按热门排序" }, { apps: "按时间排序" }],
      hotData: [],
    };
  },
  components: {},
  mounted() {},
  methods: {
    // 封装多次请求按时间不同查找
    getmysql(val, sqlget) {
      this.$http
        .get(sqlget, {
          params: {
            pno: val || 1,
          },
        })
        .then((res) => {
          this.hotData = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    tabs(index) {
      // 将按热门分类值传入vuex中 给分页提供判断
      // this.$store.commit('FlIndex',index)

      this.num = index;
      if (index == 1) {
        let val = 1;
        let sqlget = "/NowcnimenTimer";
        this.getmysql(val, sqlget);
        // 传给vuex 让其他页面监听 便于恢复默认值
        this.$store.commit('HotIndex',index)
      } else {
        let val = 1;
        let sqlget = "/Nowcnimen";
        this.getmysql(val, sqlget);
        // 传给vuex 让其他页面监听 便于恢复默认值
        this.$store.commit('HotIndex',index)
      }
    },
    handleCurrentChange(val) {
      if(this.num == 0){
        let sqlget = "/Nowcnimen";
        this.getmysql(val, sqlget);
      }else if(this.num == 1){
        let sqlget = "/NowcnimenTimer";
        this.getmysql(val, sqlget);
      }
    },

    // 类型，区域，年代查询封装
    LxNdQy(sqls, LX) {
      this.$http
        .get(sqls, {
          params: {
            leixing: LX,
          },
        })
        .then((res) => {
          console.log(res.data.data);
          this.hotData = res.data.data;
          this.total = res.data.data.length
          if(res.data.data.length==0){
            this.shows = true
          }else{
            this.shows = false
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 点击携带参数跳转到详情页
    HotDetail(id){
      let routeUrl = this.$router.resolve({
          path: '/movie/detail',
          query: {id:id}
        });
      window.open(routeUrl.href, '_blank');
    }
  },
  computed: {
    // 监听三类 vuex中按钮的动态变化
    listData1() {
      return this.$store.state.leixin1;
    },
    listData2() {
      return this.$store.state.leixin2;
    },
    listData3() {
      return this.$store.state.leixin3;
    },
    // 监听按时间或者按默认的索引
    // FlIndexs(){
    //   return this.$store.state.FlIn;
    // }
  },
  async created() {
    this.handleCurrentChange();
    // 查询默认全部数据
    let getFyALL = await this.$http.get('/NowcnimenFyALL')
    this.total = getFyALL.data.data.length
  },
  watch: {
    listData1(val) {
      let LX1 = val.leixining1;
      if(LX1=="全部"){
        let val = 1;
        let sqlget = "/Nowcnimen";
        this.getmysql(val, sqlget);
        // 局部无刷新有很大的弊端，路由跳转到当前页面，实现刷新
        this.$router.go(0)
      }else{
        let sqls = "/NowcnimenLx";
        this.LxNdQy(sqls, LX1);
      }
      
    },
    listData2(val) {
      let LX2 = val.leixining2;
      if(LX2=="全部"){
        let val = 1;
        let sqlget = "/Nowcnimen";
        this.getmysql(val, sqlget);
        // 局部无刷新有很大的弊端，路由跳转到当前页面，实现刷新
        this.$router.go(0)
      }else{
        let sqls = "/NowcnimenQy";  
        this.LxNdQy(sqls, LX2);
      }
    },
    listData3(val) {
      let LX3 = val.leixining3;
      if(LX3=="全部"){
        let val = 1;
        let sqlget = "/Nowcnimen";
        this.getmysql(val, sqlget);
        // 局部无刷新有很大的弊端，路由跳转到当前页面，实现刷新
        this.$router.go(0)
      }else{
        let sqls = "/NowcnimenTm";
        this.LxNdQy(sqls, LX3);
      }
    },
    // FlIndex()
    // FlIndexs(val){
    //   console.log(val.FlIning);
    // }
  },
};
</script>

<style lang="scss" scoped>
.mainBody {
  width: 100%;
  min-height: 400px;
  .mainBody-box {
    width: 1120px;
    min-height: 400px;
    /* background:rgb(125, 165, 226) ; */
    margin: 30px auto;
    /* .body-wrap-box-main {
      
    } */
    .mainBody-card-child:hover {
      transform: scale(1.1);
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      color: red;
      font-size: 16px;
    }

    .mainBody-card {
      /* flex: 15% 1 ; */
      float: left;
      margin: 20px 25px 10px 0;
      width: 160px;
      height: 282px;

      /* background: #5ec3e2; */
      .mainBody-card-child {
        transition: 0.3s all;
        position: relative;
        width: 160px;
        height: 282px;
        #black-wrap {
          position: absolute;
          bottom: 60px;
          left: 0;
          width: 160px;
          height: 100px;
          background: rgb(255, 255, 255);
          text-align: center;
          display: none;
          z-index: 99;
          > span:nth-child(1) {
            display: block;
            color: #000;
            font-size: 14px;
            margin: 20px 0 10px 0;
          }
          > span:nth-child(2) {
            display: block;
            color: #000;
            font-size: 12px;
          }
        }
        img {
          width: 160px;
          height: 220px;
        }
        .card-one {
          text-align: center;
        }
        .card-two {
          text-align: center;
          color: rgb(254, 188, 47);
          margin-top: 5px;
          font-weight: bold;
        }
      }
    }
    .mainBody-box-paixu {
      box-sizing: border-box;
      span {
        padding: 6px 12px;
        margin: 0 5px 20px 0;
        background: #5ec3e2;
        border-radius: 10px;
        color: rgb(129, 123, 123);
        font-size: 13px;
        font-weight: bold;
      }
    }
  }
}
.mainBody-card:hover #black-wrap {
  display: block !important;
  color: red !important;
}
.active {
  background: #ec3f35 !important;
  color: #fff !important;
  font-size: 13px;
  font-weight: bold;
}
.all {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.Myshows-wrap{
  width: 1000px;
  height: 500px;
  margin: -400px auto 10px auto;
 text-align: center;
 img{
   width: 350px;
 }
}
</style>
